<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<meta name="decorator" content="moduleList" />
<script
	src="${staticPath}/lib/datetimepicker/0.0.11/js/bootstrap-datetimepicker.min.js"
	type="text/javascript"></script>
<script type="text/javascript" src="${staticPath}/js/list.js"></script>
<script type="text/javascript" src="${staticPath}/js/common.js"></script>
<script type="text/javascript" src="${staticPath}/js/json2.js"></script>
<script
	src="${staticPath}/lib/datetimepicker/0.0.11/js/locales/bootstrap-datetimepicker.zh-CN.js"
	type="text/javascript"></script>
<script src="${staticPath}/lib/accounting/0.3.2/accounting.min.js"
	type="text/javascript"></script>

<script type="text/javascript">
    var progressBtn;
	$(document).ready(function() {
		// 浏览器类型判断
		if ($.browser.msie)
			$('#iframeDiv').append("<iframe id='iframe' onreadystatechange='onIFrameLoad()'></iframe>");
		
		$(".o-a-form-date").datetimepicker({
			language : 'zh-CN',
			autoclose : true,
			minView : 2,
			todayBtn : 1,
			pickerPosition : "bottom-left"
		});
	});
	function checkData() {
		if ($("#endDate").val().length != 0
				&& $("#startDate").val().length != 0) {
			if ($("#endDate").val() < $("#startDate").val()) {
				alert("结束日期小于开始日期,请重新选择日期！");
				return false;
			} else {
				return true;
			}
		}
		return true;
	}

	function exportExcel() {
		$('#exportBtn').attr("disabled", "true");
		// 进度条
		/* progressBtn = $.dicProgress({
			style : 0,
			context : $('#statement-search-builder'), 
			waitTime : 300
		}); */
		/* var url = contextPath + "intQuery/terminalSalesReport?opt=1&params=" 
				+ JSON2.stringify(getParams()); */
		var url ="${contextPath}/statement/salesSelfrun/exportExcel?params="
				+ JSON2.stringify(getParams());
		if ($.browser.msie) {
			$('#iframe').attr('src', url);
		} else {
			$('#iframeDiv').empty();
			$('#iframeDiv').append(
					"<iframe id='iframe' onload='onIFrameLoad()' src='" + url
							+ "'/>");
		}
		$('#exportBtn').removeAttr("disabled");
	}

	// 导出excel完毕
	function onIFrameLoad() {
		if ($.browser.msie) {
			if ('interactive' == $('#iframe').attr('readyState')
					&& progressBtn != null) {
				progressBtn.close();
				$('#exportBtn').removeAttr("disabled");
			}
		} else {
			if (progressBtn != null) {
				progressBtn.close();
				$('#exportBtn').removeAttr("disabled");

			}
		}
	}
	
	function getParams() {
		var params = {
			startDate : $('#startDate').val(),
			endDate : $('#endDate').val(),
			barCode : $('#barCode').val(),
			shopName:$('#shopName').val()
		};
		return params;
	}
</script>

</head>
<body>
	<form:form name="listForm" modelAttribute="statementSalesSelfrun"
		method="post" class="form-inline" role="form">
		<ol class="breadcrumb map_1">
			<li><a href="${contextPath}/index">首页</a></li>
			<li><a
				href="${contextPath}/biz/example/form/elements?navId=${navId}">结算对账</a></li>
			<li class="active">自营销售</li>
		</ol>
		<div class="o-l-search-builder f_1">
			<div id="statement-search-builder" class="collapse"
				style="height: auto;">
				<div class="f_2">
					<div class="form-group col-sm-6">
						<label for="inputEmail3" class="col-sm-3 control-label f_4">开始日期：</label>
						<div class="col-sm-9 f_6">
							<div class="input-group date o-a-form-date" data-date=""
								data-date-format="yyyy-mm-dd">
								<input class="form-control f_13" id="startDate" name="startDate"
									value="<fmt:formatDate value="${statementSalesSelfrun.startDate}" pattern="yyyy-MM-dd"/>"
									type="text" readonly /> <span class="input-group-addon f_time"><i
									class="glyphicon glyphicon-remove"></i></span> <span
									class="input-group-addon f_time"><span
									class="glyphicon glyphicon-calendar"></span></span>
							</div>
						</div>
					</div>
					<div class="form-group col-sm-6">
						<label for="inputEmail3" class="col-sm-3 control-label f_4">结束日期:</label>
						<div class="col-sm-9 f_6">
							<div class="input-group date o-a-form-date" data-date=""
								data-date-format="yyyy-mm-dd">
								<input class="form-control f_13" name="endDate" id="endDate"
									value="<fmt:formatDate value="${statementSalesSelfrun.endDate}" pattern="yyyy-MM-dd"/>"
									type="text" readonly /> <span class="input-group-addon f_time"><i
									class="glyphicon glyphicon-remove"></i></span> <span
									class="input-group-addon f_time"><span
									class="glyphicon glyphicon-calendar"></span></span>
							</div>
						</div>
					</div>
				</div>
				<div class="f_2">
					<div class="form-group col-sm-6">
						<label for="inputEmail3" class="col-sm-3 control-label f_4">商品编码:</label>
						<div class="col-sm-9 f_6">
							<form:input id="barCode" path="barCode" class="f_5"
								placeholder="商品编码" />
						</div>
					</div>
				</div>
			</div>
			<div class="f_8">
				<div class="f_2">
					<div class="col-sm-8 f_6">
						<form:input id="shopName" path="shopName" class="f_5"
							placeholder="门店" />
					</div>
					<button type="submit" onclick="return checkData()"
						class="btn btn-warning btn_1">查&nbsp;询</button>
					<button type="button" id="exportBtn" name="exportBtn"
						onclick="exportExcel()" class="btn btn-warning btn_1">导&nbsp;出</button>
				</div>
			</div>
			<div class="o-l-chevron-down">
				<a href="#" class="btn btn-default" data-toggle="collapse"
					data-target="#statement-search-builder" id="chevronDownBtn"
					role="button"><span id="glyphiconspan"
					class="glyphicon glyphicon-chevron-down"></span></a>
			</div>
		</div>
		<tags:message content="${message}" />
		<div class="o-l-search-builder f_9">
			<table
				class="table table-striped table-hover o-l-table table-bordered"
				id="table1">
				<thead class="t_1">
					<tr>
						<th style="width: 1px"><input type="checkbox" data-ckb="all"></th>
						<th>门店</th>
						<th>商品编码</th>
						<th>商品条码</th>
						<th>商品名称</th>
						<th>商品规格</th>
						<th>销售数量</th>
						<th>销售单价</th>
						<th>销售金额</th>
						<th>销售日期</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${page.list}" var="statementSalesSelfrun">
						<tr data-herf=##
							"${contextPath}/statement/statementStock/${stock.id}/getByStockId"
							data-target="_self">
							<td class="o-l-tab-ckb"><input type="checkbox"
								data-ckb-id="${statementSalesSelfrun.id}"></td>
							<td>${statementSalesSelfrun.shopName}</td>
							<td>${statementSalesSelfrun.barCode}</td>
							<td>${statementSalesSelfrun.goodsBar}</td>
							<td>${statementSalesSelfrun.goodsName}</td>
							<td>${statementSalesSelfrun.goodsModel}</td>
							<td data-accounting-precision="2">${statementSalesSelfrun.quantity}</td>
							<td data-accounting-precision="2">${statementSalesSelfrun.costUnit}</td>
							<td data-accounting-precision="2">${statementSalesSelfrun.cost}</td>
							<td><fmt:formatDate
									value="${statementSalesSelfrun.saleDate}" pattern="yyyy-MM-dd" /></td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
		<pager:pager pageSize="${page.pageSize}" pageNo="${page.pageNo}"
			url="" total="${page.total}" />
	</form:form>
	<div id="iframeDiv" style='display: none'></div>
</body>
</html>